@import "common/config";
@import "common/module";

.reset();
//novice-exclusive
.novice-exclusive {
  //exclusive-hd
  .exclusive-hd {
    img {
      width: 100%;
    }
  }
  //exclusive-bd
  .exclusive-bd {
    color: #666;
    padding: 0 .24rem;

    //exclusive-bd-intro
    .exclusive-bd-intro {
      position: relative;
      padding-top: .25rem;
      padding-bottom: .35rem;
      .exclusive-bd-intro-decorate {
        position: absolute;
        top: .2rem;
        left: -.24rem;
        display: block;
        width: .64rem;
        height: 1.32rem;
        background: url("../images/novice_exclusive/exclusive_bd_intro_decorate.png");
        background-size: .64rem 1.32rem;
      }
      p {
        text-indent: .48rem;
        font-size: .24rem;
        line-height: .42rem;
      }
    }

    //product-list
    .product-list-mod {
      margin-top: .3rem;
      .mod-tit {
        text-align: center;
        padding: 0 .28rem;
        margin-top: .72rem;
        .tit-decorate {
          height: 1px;
          background-color: #edaf15;
          margin: 0 auto;
        }
        .tit-txt {
          margin: -22px auto 0;
          width: 216px;
          .tit-txt-inner {
            position: relative;
            font-size: 34px;
            padding: 0 44px;
            display: inline-block;
            background-color: #fff;
            &:before {
              position: absolute;
              left: 0;
              top: 18px;
              content: '';
              width: 45px;
              height: 4px;
              background-color: #edaf15;
            }
            &:after {
              position: absolute;
              right: 0;
              top: 18px;
              content: '';
              width: 45px;
              height: 4px;
              background-color: #edaf15;
            }
            span {
              color: #ffffff;
              background-color: #edaf15;
              display: inline-block;
              font-size: .3rem;
              border-radius: 36px;
              padding: 0.14rem .34rem;
              vertical-align: middle;
            }
          }
        }
      }
      .mod-cont {
        overflow: hidden;
        .mod-cont-item {
          display: block;
          padding: .24rem .24rem;
          /* border-top: 1px solid #eaeaea; */
          /* margin-top: -1px; */
          border: 1px dashed #ededed;
          margin-top: .24rem;
          //item-hd
          .item-hd {
            color: #0e0e0e;
            font-size: .3rem;
            .item-hd-txt {
              max-width: 60%;
              display: inline-block;
              .elps();
            }
            .item-hd-mark {
              display: inline-block;
              color: #f3b10e;
              border: 1px solid #ffe198;
              padding: .06rem .08rem;
              margin-left: .02rem;
              font-size: .26rem;
              border-radius: 3px;
              margin-bottom: 4px;
              vertical-align: middle;
            }
          }
          //item-bd
          .item-bd {
            overflow: hidden;
            color: #9c9c9c;
            margin-top: .3rem;
            .fl {
              float: left;
              width: 33.33%;
              text-align: center;
            }
            .item-l {
              text-align: left;
              .percentage {
                color: #edaf15;
                font-size: .42rem;
                margin-bottom: .04rem;
              }
              p {
                font-size: .22rem;
                margin-top: .2rem;
              }
            }
            .item-c {
              span {
                font-size: .44rem;
                color: #edaf15;
              }
              p {
                font-size: .22rem;
                margin-top: .18rem;
              }
            }
            .item-r {
              text-align: right;
              .circle {
                float: right;
                width: 46px;
                height: 46px;
                position: relative;
                border-radius: 50%;
                background: #edaf15;
                margin-top: .1rem;
              }
              .pie_left, .pie_right {
                width: 46px;
                height: 46px;
                position: absolute;
                top: 0;
                left: 0;
              }
              .left, .right {
                width: 46px;
                height: 46px;
                background: #D0D0D0;
                border-radius: 50%;
                position: absolute;
                top: 0;
                left: 0;
              }
              .pie_right, .right {
                clip: rect(0, auto, auto, 23px);
              }
              .pie_left, .left {
                clip: rect(0, 23px, auto, 0);
              }
              .mask {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                left: 2px;
                top: 2px;
                background: #fffcf8;
                position: absolute;
                text-align: center;
                line-height: 42px;
                font-size: 14px;
                font-weight: bold;
                color: #edaf15;
              }
              .sell-out {
                background: #D0D0D0;
                .mask {
                  span {
                    display: none;
                  }
                  i {
                    color: #d0d0d0;
                    font-style: normal;
                  }
                }
              }
            }
          }

        }
      }
    }
    .product-list {

    }

    //exclusive-rule
    .exclusive-rule {
      color: #666;
      line-height: .42rem;
      margin-top: .24rem;
    }
  }
}

